10. ES6 - 樣板字面值 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 12 屆 iThome 鐵人賽

DAY 10

自我挑戰組

JS 作品實戰應用 - Vue 電商網站系列第 10 篇

10. ES6 - 樣板字面值

12th鐵人賽

古德瑞

2020-09-25 11:35:00

1978 瀏覽

分享至

樣板字面值 (Template literals) 介紹

樣板字面值 (Template literals) 未出現前，先行版本 (Template String)，兩者是一樣的。
樣板字面值提供了比較方便的字串模板，使用重音節 `` 前後包住，在把變數或表達式放進 ${ } 裡面，而且也支援多行字串，
就不用擔心單引號雙引號使用錯誤而造成程式碼無法使用。

單行結構

// 傳統寫法
const cash = 10;
const string ='氣氣氣氣'
const sentence ='我的' + cash + '元掉到水溝裡了,真是' + string;
console.log(sentence);
// 輸出結果 : 我的10元掉到水溝裡了,真是氣氣氣氣
// 字串需要''單引號隔開，再用+號來連結變數，寫法跟閱讀不易

// ES6寫法
const cash = 10;
const string =''
const sentence =`我的 ${ cash } 元掉到水溝裡了,真是 ${ string || '好生氣喔'}`;
// 輸出結果 : 我的10元掉到水溝裡了,真是好生氣喔
// 樣板字面值是用兩個反引號 `` ，將內容包覆在裡面，將變數或表達式放進 ${ } 裡面
//  || 是 or 的意思，如果前面是假值空值，就換替換 || 後面的內容

多行結構

使用陣列例子，先設定html

<body>
    <div id="list">
    </div>
<body>

// javascript
const people = [
   {
    name:'小明',
    cash: 50
   },
   {
    name:'花道',
    cash: 5000
   },
   {
    name:'流川',
    cash: 10000
   }
]

//傳統多行寫法
const listString = '<ul>\
<li>我是' + people[0].name + '，身上' + people[0].cash + '元</li>\
<li>我是' + people[1].name + '，身上' + people[1].cash + '元</li>\
<li>我是' + people[2].name + '，身上' + people[2].cash + '元</li>\
</ul>';
document.querySelector('#list'). innerHTML = listString; // 寫回html
// 斷行必須要加上反斜線 \ 做分行撰寫，且要自己依序填入陣列方式內容，費時不易讀。

//ES6寫法
const listString = `<ul>
<li>我是 ${ people[0].name } ，身上 ${ people[0].cash } 元</li>
<li>我是 ${ people[1].name } ，身上 ${ people[0].cash } 元</li>
<li>我是 ${ people[0].name } ，身上 ${ people[0].cash } 元</li>
</ul>`;
// 不用加反斜線，理解好閱讀

其他範例

樣板字面值可以把變數或表達式放進 ${ } 裡面

// 'string text ${fexpression} string text'
const person = {
    name : '小明',
}
const sentence = `我是 ${ person.name }，身上帶有 ${ person.cash || 1000 } 元`;
console.log(sentence);
// 輸出結果 : 我是 小明，身上帶有 1000 元
// person.cash 因為物件李沒有此屬性，所以會替換成 || 後面的值。

${ person.cash = 1000 } 
// 因為可以使用表達式，所以也可以 = 赋值過去來表示

${ const a = 1000 } 
// 使用 const 就會報錯，因為 const 不是表達式，並不會回傳值

// 加入 cash 屬性
const person = {
    name : '小明',
    cash : 1000,
}
// 使用立即函式
const sentence = `我是 ${ person.name }，身上帶有 ${ (function(c){ return c * 2 })(person.cash) } 元`;
console.log(sentence);
// 輸出結果 : 我是 小明，身上帶有 2000 元

// 使用箭頭函式精簡
const sentence = `我是 ${ person.name }，身上帶有 ${ ((c) => c * 2 )(person.cash) } 元`;

// 樣板字面值本身也是表達式，所以可以再插入樣板字面值
const sentence = `我是 ${ person.name }，${ 身上帶有  ${ person.cash } 元 }`;

巢狀結構

// 板字面值可以再插入樣板字面值組成巢狀結構，使用一開始陣列案例延續

const people = [
   {
    name:'小明',
    cash: 50
   },
   {
    name:'花道',
    cash: 5000
   },
   {
    name:'流川',
    cash: 10000
   }
]

// 使用迴圈取值，採用 map 方式，map會一一取值，並重新組成陣列結構
const listString = `<ul>
    ${ people.map((person) => `<li>我是 ${ person.name } ，身上 ${ person.cash } 元</li>`).join{''} }
</ul>`;
console.log(listString);
document.querySelector('#list'). innerHTML = listString;